Amazon S3 上のデータを操作するコンポーネントを Web アプリに簡単に追加できる「Storage Browser for S3」がリリースされました

こんにちは、製造ビジネステクノロジー部の若槻です。

Amazon S3 上のデータを操作するコンポーネントを Web アプリに簡単に追加できる「Storage Browser for S3」がリリースされました。

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/storage-browser-amazon-s3/

Storage Browser for S3 は AWS Amplify UI React コンポーネントとして提供されており、ユーザーやディレクトリごとのデータの参照、アップロード、ダウンロード、コピー、削除などの権限の制御も合わせて簡単に画面実装を行うことができます。

AWS News Blog はこちらです。Storage Browser for S3 の実装および操作手順が詳しく紹介されています。

https://aws.amazon.com/jp/blogs/aws/connect-users-to-data-through-your-apps-with-storage-browser-for-amazon-s3/

サービスページも公開されていました。

https://aws.amazon.com/s3/features/storage-browser/

Amazon S3 のドキュメントにも AWS Amplify Auth および Amplify Storage を利用した設定手順が記載されています。

https://docs.aws.amazon.com/AmazonS3/latest/userguide/setup-storagebrowser.html

試してみた

事前準備

まず事前準備として AWS 側およびローカル環境での Amplify app の開発環境を作成します。

Amplify app の作成

今回は下記のドキュメントを参考に、Amplify app のテンプレートアプリを作成します。

https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/

下記は aws-samples/amplify-next-template からクローンしたリポジトリを使用して Amplify app をデプロイした様子です。

ローカルの開発環境の準備

Git リポジトリをローカルにクローンします。

gh repo clone cm-rwakatsuki/amplify-next-template

npm パッケージをインストールします。

npm ci

マネジメントコンソールから Amplify app の amplify_outputs.json をダウンロードしてプロジェクトのルートに配置します。

ローカルでサンプルアプリケーションが起動することを確認します。

npm run dev

storage の追加

Storage Browser for S3 で使用する Amplify storage を追加します。

ローカルで amplify/storage/resource.ts および amplify/backend.ts を下記のように設定します。

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'amplifyTeamDrive',
});

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { data } from './data/resource.js';
import { storage } from './storage/resource'; // 追記

defineBackend({
  auth,
  data,
  storage, // 追記
});

実装変更を push して storage の追加をデプロイします。

git push

デプロイが完了すると storage が追加されました。

storage のアクセス権の設定

Storage Browser for S3 で使用する Amplify storage のアクセス権を設定します。今回はサンプルコードに従って次のように設定します。これによりゲストユーザーでも指定のディレクトリ配下のファイルに対してであれば読み取りや書き込みが可能になります。

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'amplifyTeamDrive',
  access: (allow) => ({
    'profile-pictures/{entity_id}/*': [
      allow.guest.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete'])
    ],
    'picture-submissions/*': [
      allow.authenticated.to(['read','write']),
      allow.guest.to(['read', 'write'])
    ],
  })
});

実装変更を push して storage のアクセス権の設定を反映させます。

git push

Storage Browser for S3 コンポーネントの実装

@aws-amplify/ui-react-storage/browser モジュールを使用して Storage Browser for S3 コンポーネントを Web アプリに追加します。

@aws-amplify/ui-react-storage ライブラリをインストールします。

npm i @aws-amplify/ui-react-storage aws-amplify

<StorageBrowser/> を使用して Storage Browser for S3 コンポーネントを追加します。

"use client";

import "./../app/app.css";
import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";
import {
  createAmplifyAuthAdapter,
  createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';

Amplify.configure(outputs);

const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter(),
});

export default function App() {

  return (
    <StorageBrowser/>
  );
}

npm run dev でアプリをローカルで起動すると、コンポーネントが追加できていることが確認できました。

しかしこの時点ではまだファイルやディレクトリは無く、またアップロードの操作もできないようです。

Amplify storage のマネジメントコンソールから picture-submissions ディレクトリを作成し、画像ファイルをアップロードしてみます。

しかしコンポーネントの様子は変わらず、引き続き参照やアップロードの操作はできませんでした。

アクセス権限の設定が正しいかなどを確認する必要がありそうです。解決したら追記をしたいと思います。

おわりに

Amazon S3 上のデータを操作するコンポーネントを Web アプリに簡単に追加できる「Storage Browser for S3」がリリースされたのでご紹介しました。

エンドユーザー向けに画像アップロード領域を提供したり、管理者向けに画像ファイルや config ファイルを変更する画面を提供したい場合に Amplify を使って簡単に実装出来るのは便利そうですね。ハマるユースケースは多いのではないでしょうか。

以上